import React from "react";
import { render } from "react-dom";
import { Provider } from "mobx-react";
import {
  HashRouter as Router,
  Route,
  Switch,
  Redirect,
} from "react-router-dom";
import { asyncComponent } from "react-async-component";

import allStore from "./stores";
import "./style";

const coms = {
  Index: asyncComponent({
    resolve: () => import("./components/Index"),
  }),
  MeetingDetail: asyncComponent({
    resolve: () => import("./components/MeetingDetail"),
  }),
  MyMeetingList: asyncComponent({
    resolve: () => import("./components/MyMeetingList"),
  }),
  MyMeeting: asyncComponent({
    resolve: () => import("./components/MyMeeting"),
  }),
  Scheduling: asyncComponent({
    resolve: () => import("./components/Scheduling"),
  }),
  MeetingAgenda: asyncComponent({
    resolve: () => import("./components/MeetingAgenda"),
  }),
  InformationList: asyncComponent({
    resolve: () => import("./components/InformationList"),
  }),
  ContactUs: asyncComponent({
    resolve: () => import("./components/ContactUs"),
  }),
  MeetingSignList: asyncComponent({
    resolve: () => import("./components/MeetingSignList"),
  }),
  MeetingSign: asyncComponent({
    resolve: () => import("./components/MeetingSign"),
  }),
  HistoryTidbit: asyncComponent({
    resolve: () => import("./components/HistoryTidbit"),
  }),
  MeetingEvaluation: asyncComponent({
    resolve: () => import("./components/MeetingEvaluation"),
  }),
};

const Root = () => (
  <Provider {...allStore}>
    <Router>
      <Route
        name="home"
        path="/"
        render={(props) => (
          <Switch>
            <Route
              name="meetingDetail"
              path="/meeting/detail/:id"
              component={coms.MeetingDetail}
            />
            <Route
              name="myMeetingList"
              path="/myMeetingList"
              component={coms.MyMeetingList}
            />
            <Route
              name="myMeeting"
              path="/myMeeting/:id"
              component={coms.MyMeeting}
            />
            <Route
              name="scheduling"
              path="/scheduling/:id"
              component={coms.Scheduling}
            />
            <Route
              name="meetingAgenda"
              path="/meetingAgenda/:id"
              component={coms.MeetingAgenda}
            />
            <Route
              name="informationList"
              path="/informationList/:id"
              component={coms.InformationList}
            />

            <Route
              name="contactUs"
              path="/contactUs/:id"
              component={coms.ContactUs}
            />

            <Route
              name="meetingSignList"
              path="/meetingSignList"
              component={coms.MeetingSignList}
            />
            <Route
              name="meetingSign"
              path="/meetingSign/:id"
              component={coms.MeetingSign}
            />
            <Route
              name="historyTidbit"
              path="/historyTidbit"
              component={coms.HistoryTidbit}
            />
            <Route
              name="meetingEvaluation"
              path="/meetingEvaluation"
              component={coms.MeetingEvaluation}
            />
            <Route name="index" path="/" component={coms.Index} />
            <Redirect to="/" />
          </Switch>
        )}
      />
    </Router>
  </Provider>
);

render(<Root />, document.getElementById("root"));
